/***
 * desc:直营客户补充客户编码
 * 
 * 
 */
import { useState, useEffect } from 'react'
import { Form, Input, Select, message } from 'antd';
import CommonModal from '@/components/CommonModal'
import CommonLoading from '@/components/CommonLoading';
import { layout4 } from '@/utils/config';
import { noZhChinness } from '@/utils/rule';
import { suppleUserCodeOp } from '../service';

const { Option } = Select

const productList = [
  { typeId: 1, remark: '顺丰特快' },
  { typeId: 2, remark: '顺丰标快' },
  { typeId: 247, remark: '电商标快' },
]

const AddSFModal = ({ record, handleOk, handleCancel }) => {
  const [form] = Form.useForm();

  const [loading, setLoading] = useState(false);//loading

  useEffect(() => {
    if (record.extend) {
      const params = JSON.parse(record.extend);
      if(params.expressTypeId){
        params.productType = params.expressTypeId + '@' + params.expressTypeName;
        params.expressTypeId = undefined;
        params.expressTypeName = undefined;
      }
      form.setFieldsValue(params);
    }
  }, [record])

  const onOk = () => {
    form.validateFields().then(async val => {
      setLoading(true);
      const { settleAccount, isvClientCode, productType } = val;
      const [expressTypeId, expressTypeName] = productType?.split('@') || [];
     
      let res = await suppleUserCodeOp({
        settleAccount,
        isvClientCode,
        expressTypeId,
        expressTypeName,
        id: record.id
      })
      const { success, msg } = res
      if (success) {
        message.success(msg);
        handleOk();
        handleCancel();
      }
      setLoading(false);
    })
  }

  return (
    <CommonModal
      title='补充客户编码'
      visible={true}
      onOk={onOk}
      onCancel={handleCancel}
      width='456px'
      minHeight='158px'
    >
      <Form form={form} name='supplement-user-code-form' {...layout4}>

        <Form.Item name="settleAccount" label="月结账号" rules={[{ required: true, message: '月结账号不能为空' }, noZhChinness]}>
          <Input placeholder="请输入月结账号" autoComplete="off" />
        </Form.Item>
        {
          /^\u987a\u4e30/.test(record.expressName) && (
            <>
              <Form.Item name="isvClientCode"
                label="顺丰客户编码"
                rules={[{ required: true, message: '顺丰独立客户编码不能为空' }, noZhChinness]}
              >
                <Input placeholder="请输入顺丰独立客户编码" autoComplete="off" />
              </Form.Item>
              <Form.Item
                label="业务类型"
                name="productType"
                rules={[{ required: true, message: '请先选择业务类型' }]}
              >
                <Select
                  showSearch
                  placeholder="请选择业务类型"
                  optionFilterProp='children'
                  allowClear={true}
                >
                  {productList.map(d => <Option key={`${d.typeId}@${d.remark}`} >{d.remark}</Option>)}
                </Select>
              </Form.Item>
            </>
          )
        }


      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  )
}

export default AddSFModal